<template>
  <!-- <transition name="slide-left" mode="out-in"> -->
  <template v-if="setting.themeConfig.value.themeLayout !== 'sidebar'">
    <t-layout key="no-side">
      <layout-header />
      <t-layout>
        <layout-side-nav />
        <layout-content />
      </t-layout>
    </t-layout>
  </template>
  <template v-else>
    <t-layout key="side" :class="mainLayoutCls">
      <layout-side-nav />
      <t-layout>
        <layout-header />
        <layout-content />
      </t-layout>
    </t-layout>
  </template>
  <!-- </transition> -->
</template>
<script setup lang="ts">
import { computed } from 'vue';
import { storeToRefs } from 'pinia';
import LayoutHeader from './components/LayoutHeader.vue';
import LayoutSideNav from './components/LayoutSideNav.vue';
import LayoutContent from './components/LayoutContent.vue';
import { useSystemStore } from '@/store/modules/system';

const settingStore = useSystemStore();
const setting = storeToRefs(settingStore);
const mainLayoutCls = computed(() => [
  {
    'layout-with-sider': settingStore.showSidebar,
  },
]);
</script>
